<template>
  <el-dialog
    ref="wkDialog"
    :visible="visible"
    :append-to-body="true"
    :close-on-click-modal="false"
    width="500px"
    @close="close"
    title="编辑角色"
    class="edit_role"
  >
    <el-form
      ref="editRoleForm"
      :model="ruleForm"
      :rules="rules"
      label-width="100px"
      label-position="top"
    >
      <el-form-item label="选择角色" prop="roleList" style="width: 100%">
        <UserEmployeeSelect
          v-model="ruleForm.roleList"
          multiple
          style="width: 100%"
        ></UserEmployeeSelect>
      </el-form-item>
    </el-form>
    <div class="" />
    <span slot="footer" class="dialog-footer">
      <el-button @click="close">取 消</el-button>
      <el-button type="primary" @click="sureClick">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { adminRoleRelatedDeptUserAPI } from "@/api/admin/role";
import UserEmployeeSelect from "../../crm/components/UserEmployeeSelect";
export default {
  // 编辑角色-弹框
  name: "EditRoleDialog",
  components: {
    UserEmployeeSelect,
  },
  props: {
    selectionList: Array,
    visible: {
      type: Boolean,
      required: true,
      default: false,
    },
  },
  data() {
    return {
      ruleForm: {
        roleList: [],
        userIds: [],
        deptIds: [],
      },
      rules: {
        roleList: [{ required: true, message: "请选择角色", trigger: "blur" }],
      },
    };
  },

  created() {
    /**
     * 修改单个员工角色
     */
    if (this.selectionList.length === 1) {
      const userData = this.selectionList[0];
      this.ruleForm.roleList = userData.roleId
        ? this.selectionList[0].roleId
            .split(",")
            .map((item) => parseFloat(item))
        : [];
    }
  },
  methods: {
    close() {
      this.$emit("update:visible", false);
    },
    sureClick() {
      this.$refs.editRoleForm.validate((valid) => {
        if (valid) {
          const roleIdList = [];
          let userRoleIds = [];
          this.ruleForm.roleList.forEach((item) => {
            if (typeof item === "string") {
              if (item.includes("@")) {
                const temps = item.split("@");
                if (temps.length > 1) {
                  const tempsIds = temps[1]
                    .split(",")
                    .map((item) => parseFloat(item));
                  userRoleIds = userRoleIds.concat(tempsIds);
                }
              }
            } else {
              roleIdList.push(item);
            }
          });
          const roleIds = Array.from(new Set(roleIdList.concat(userRoleIds)));
          const params = {
            roleIds,
          };
          params.userIds = this.selectionList.map((item) => item.userId);
          adminRoleRelatedDeptUserAPI(params)
            .then((res) => {
              this.$message.success("操作成功");
              this.$emit("change");
              this.close();
            })
            .catch(() => {});
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.el-form {
  margin-top: 10px;
  /deep/ .el-form-item__label {
    line-height: 30px;
    padding-bottom: 0;
  }
}
.edit_role /deep/ .el-dialog__body{
  padding-top: 0 !important;
}
</style>
